<template>
    <div id="classification" >
        <Head>
            <div slot="head-left" @click="back">
                <van-icon name="arrow-left" /> 
            </div>
             <div slot="head-center" @click="back">
                购物分类
            </div>
        </Head>
        <!-- <Head class="her">
            <div slot="head-center">
                <input type="text" placeholder="输入" />
                <van-icon name="search" size="27px" class="input-text" />
            </div>
        </Head> -->
        <ClassLeft @myFun="myClick"></ClassLeft>
        <div id="classright">
            <ul>
                <li v-for="itme in suju1 " :key="itme.id" >
                    <img :src="itme.img" alt />
                    <p>
                        {{itme.introduce}}
                       
                    </p>
                </li>
            </ul>
        </div>
         <Bar>
            <Baritme  path='/home' acColor='#ff5000'>
                <van-icon name="bag-o" slot="baritme-ico" size="27px" />
                <van-icon
                    name="bag-o"
                    
                    slot="baritme-ico-active"
                    color="#ff5000"
                    size="27px"
                />
                <div slot="baritme-text">首页</div>
            </Baritme>
            <Baritme  path='/classification' acColor='#ff5000'>
                <van-icon name="send-gift-o"  slot="baritme-ico" size="27px" />
                <van-icon
                    name="send-gift-o"
                    
                    slot="baritme-ico-active"
                    color="#ff5000"
                    size="27px"
                />
                <div slot="baritme-text">分类</div>
            </Baritme>
            <Baritme path='/shoppin' acColor='#ff5000'>
                <van-icon name="shopping-cart-o" slot="baritme-ico" size="27px" />
                <van-icon
                    name="shopping-cart-o"
                   
                    slot="baritme-ico-active"
                    color="#ff5000"
                    size="27px"
                />
                <div slot="baritme-text">购物车</div>
            </Baritme>
            <Baritme path='/my' acColor='#ff5000'>
                <van-icon name="manager-o" slot="baritme-ico" size="27px" />
                <van-icon
                    name="manager-o"
                    
                    slot="baritme-ico-active"
                    color="#ff5000"
                    size="27px"
                />

                <div slot="baritme-text">我的</div>
            </Baritme>
        </Bar>
        

    </div>
</template>


<script>
import ClassLeft from "../components/taobao/class/ClassLeft";
import Head from "../components/common/Head";
import Bar from '../components/common/Bar'
import Baritme from '../components/common/Baritme'
 
// import ClassRight from "../components/taobao/class/ClassRight";

export default {
    name: "Classification",
    components: {
        ClassLeft,
        Head,
        Bar,
         Baritme 
        // ClassRight
    },
    data() {
        return {
            

            suju1: [],

            suju2: [],
            suju3: [],

            suju4: [],
            suju5: [],
            suju6:[],
            suju:[]
            
        }
    },
    methods: {
        myClick(index) {
           
           if(index == 0){
              this.suju1 = this.suju6
             
           }else if (index == 1) {
               this.suju1 = this.suju2
               
           }else if(index == 2){
               this.suju1 = this.suju3
           }else if (index == 3) {
               this.suju1 = this.suju4
               
           }else if(index == 4 ){
               this.suju1 = this.suju5
           }else{
               this.suju1 = this.suju
           }
        },
        back(){
            this.$router.back()
        }
    },
    created() {
        this.axios.get("data/mall.json").then(res => {
            this.suju1 = res.data.filter(re => {
                return re.attribute == "衣服";
            });
            this.suju2 = res.data.filter(re => {
                return re.attribute == "鞋子";
            });
            this.suju3 = res.data.filter(re => {
                return re.attribute == "电脑用品";
            });
            this.suju4 = res.data.filter(re => {
                return re.attribute == "包包";
            });
            this.suju5 = res.data.filter(re => {
                return re.attribute == "化妆品";
            });
           this.suju6 = res.data.filter(re => {
                return re.attribute == "衣服";
            });
        });
    }
};
</script>
<style  scoped>
/* #classification {
    width: 100%;
    position: relative;
    top: 70px;
} */
/* input {
    display: inline-block;
    background-color: rgb(179, 180, 187);
    border-radius: 44px;
    width: 200px;
    border: none;
    padding-left: 10px;
    padding-right: 10px;
}
.input-text {
    position: relative;
    top: 9px;
    left: 10px;
} */
#classright{
   
    position:absolute;
    top: 60px;
    left:180px;
}

ul {
    /* display: flex; */
    align-items: center;
    flex-direction: column;
}
li {
    margin-bottom: 10px;
}
p {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

</style>